<form id="myForm" action="index.php?route=sinscrire&action=traitement_ajout" method="post">

    <label class="form_col" for="PSEUDOUTILISAT">Pseudo :</label>
    <input name="PSEUDOUTILISAT" id="PSEUDOUTILISAT" type="text" /><br/>
    <span class="tooltip">Le pseudo ne peut pas faire moins de 4 caractères</span>
    <br /><br />

    <label class="form_col" for="MOTDEPASSEUTILISAT">Mot de passe :</label>
    <input name="MOTDEPASSEUTILISAT" id="MOTDEPASSEUTILISAT" type="password" /><br/>
    <span class="tooltip">Le mot de passe ne doit pas faire moins de 6 caractères</span>

    <br /><br />

    <label class="form_col" for="MOTDEPASSEUTILISAT2">Mot de passe (confirmation) :</label>
    <input name="MOTDEPASSEUTILISAT2" id="MOTDEPASSEUTILISAT2" type="password" /><br/>
    <span class="tooltip">Le mot de passe de confirmation doit être identique à celui d'origine</span>
    <br /><br />

    <span class="form_col">Sexe :</span>
    <label><input name="SEXE" type="radio" value="H" />Homme</label>
    <label><input name="SEXE" type="radio" value="F" />Femme</label>
    <span class="tooltip">Vous devez sélectionnez votre sexe</span>
    <br /><br />

    <span class="form_col"></span>
    <input type="submit" value="M'inscrire" /> <input type="reset" value="Réinitialiser le formulaire" />

</form>

<script>


    // Fonction de désactivation de l'affichage des "tooltips"
        
    function deactivateTooltips() {
        
        var spans = document.getElementsByTagName('span'),
        spansLength = spans.length;
            
        for (var i = 0 ; i < spansLength ; i++) {
            if (spans[i].className == 'tooltip') {
                spans[i].style.display = 'none';
            }
        }
        
    }


    // La fonction ci-dessous permet de récupérer la "tooltip" qui correspond à notre input

    function getTooltip(elements) {
        
        while (elements = elements.nextSibling) {
            if (elements.className === 'tooltip') {
                return elements;
            }
        }
            
        return false;
        
    }


    // Fonctions de vérification du formulaire, elles renvoient "true" si tout est ok

    var check = {}; // On met toutes nos fonctions dans un objet littéral


    check['PSEUDOUTILISAT'] = function() {
        
        var PSEUDOUTILISAT = document.getElementById('PSEUDOUTILISAT'),
        tooltipStyle = getTooltip(PSEUDOUTILISAT).style;
            
        if (PSEUDOUTILISAT.value.length >= 4) {
            PSEUDOUTILISAT.className = 'correct';
            tooltipStyle.display = 'none';
            return true;
        } else {
            PSEUDOUTILISAT.className = 'incorrect';
            tooltipStyle.display = 'inline-block';
            return false;
        }

    };

    check['MOTDEPASSEUTILISAT'] = function() {
        
        var MOTDEPASSEUTILISAT = document.getElementById('MOTDEPASSEUTILISAT'),
        tooltipStyle = getTooltip(MOTDEPASSEUTILISAT).style;
            
        if (MOTDEPASSEUTILISAT.value.length >= 6) {
            MOTDEPASSEUTILISAT.className = 'correct';
            tooltipStyle.display = 'none';
            return true;
        } else {
            MOTDEPASSEUTILISAT.className = 'incorrect';
            tooltipStyle.display = 'inline-block';
            return false;
        }
        
    };

    check['MOTDEPASSEUTILISAT2'] = function() {
        
        var MOTDEPASSEUTILISAT = document.getElementById('MOTDEPASSEUTILISAT'),
        MOTDEPASSEUTILISAT2 = document.getElementById('MOTDEPASSEUTILISAT2'),
        tooltipStyle = getTooltip(MOTDEPASSEUTILISAT2).style;
            
        if (MOTDEPASSEUTILISAT.value == MOTDEPASSEUTILISAT2.value && MOTDEPASSEUTILISAT2.value != '') {
            MOTDEPASSEUTILISAT2.className = 'correct';
            tooltipStyle.display = 'none';
            return true;
        } else {
            MOTDEPASSEUTILISAT2.className = 'incorrect';
            tooltipStyle.display = 'inline-block';
            return false;
        }
        
    };

    check['SEXE'] = function() {
        
        var SEXE = document.getElementsByName('SEXE'),
        tooltipStyle = getTooltip(SEXE[1].parentNode).style;
            
        if (SEXE[0].checked || SEXE[1].checked) {
            tooltipStyle.display = 'none';
            return true;
        } else {
            tooltipStyle.display = 'inline-block';
            return false;
        }
        
    };

    // Mise en place des événements
        
    (function() { // Utilisation d'une fonction anonyme pour éviter les variables globales.
        
        var myForm = document.getElementById('myForm'),
        inputs = document.getElementsByTagName('input'),
        inputsLength = inputs.length;
        
        for (var i = 0 ; i < inputsLength ; i++) {
            if (inputs[i].type == 'text' || inputs[i].type == 'password') {
        
                inputs[i].onkeyup = function() {
                    check[this.id](this.id); // "this" représente l'input actuellement modifié
                };
        
            }
        }
        
       
        
        myForm.onreset = function() {
        
            for (var i = 0 ; i < inputsLength ; i++) {
                if (inputs[i].type == 'text' || inputs[i].type == 'password') {
                    inputs[i].className = '';
                }
            }
        
            deactivateTooltips();
        
        };
        
    })();


    // Maintenant que tout est initialisé, on peut désactiver les "tooltips"
        
    deactivateTooltips();

    
</script>
